<template>
  <view class="refund-wrapper">
    <JeepayCustomNavbar textColor="#fff" :transparent="true" title="订单退款" backCtrl="back" />
    <view class="refund-main">
      <view class="refund-title">退款金额</view>
      <view class="refund-money">
        <input type="digit" v-model="vdata.refundAmount" :maxlength="vdata.maxLength" id="" @input="inputChange" />
        <view class="icon-unit">(元)</view>
      </view>
      <view class="sure-refund">
        <text>可退 {{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }} </text>
        <view class="all-refund" @tap="vdata.refundAmount = cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)"> 全部退款 </view>
      </view>
      <view class="refund-title">退款原因</view>
      <view class="refund-reason">
        <input type="text" placeholder="请输入退款原因" placeholder-style=" color: rgba(255,255,255,0.35)" v-model="vdata.refundRemark" />
      </view>

      <view class="refund-info">
        <view class="info-title">订单金额</view><view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
      </view>

      <view class="refund-info">
        <view class="info-title">已退金额</view><view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.refundAmount) }}</view>
      </view>

      <view class="refund-info">
        <view class="info-title">剩余金额</view><view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }}</view>
      </view>

      <view class="confirm-refund flex-center" hover-class="touch-button" hover-stay-time="150" @tap="confirmRefund"> 确认退款 </view>
    </view>
  </view>
  <confirmRefundPopup ref="refundPopup" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { reqLoad, API_URL_PAY_ORDER_LIST, $payOrderRefund } from '@/http/apiManager.js'
import confirmRefundPopup from './components/confirmRefundPopup.vue'
import { onLoad } from '@dcloudio/uni-app'
import cal from '@/commons/utils/cal.js'
import datamap from '@/commons/utils/datamap.js'
import infoBox from '@/commons/utils/infoBox.js'
import ent from '@/commons/utils/ent.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
onLoad((options) => {
  reqLoad.getById(API_URL_PAY_ORDER_LIST, options.payOrderId).then(({ bizData }) => {
    vdata.orderInfo = bizData
  })
})
const refundPopup = ref(null)
const vdata = reactive({
  orderInfo: {},

  refundAmount: 0,
  refundRemark: '', // 退款原因
  maxLength: 15,
})

// 确认退款
function confirmRefund() {
  if (isNaN(vdata.refundAmount) || vdata.refundAmount <= 0) {
    return infoBox.showToast('请输入退款金额')
  }

  if (vdata.refundAmount > cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)) {
    return infoBox.showToast('退款金额超限')
  }

  if (!vdata.refundRemark) {
    return infoBox.showToast('请输入退款原因')
  }

  // TODO 调起 支付密码弹层  发起请求。

  refundPopup.value.open(vdata.refundAmount, refundPost)
}
// 只能输入小数点后两位
const inputChange = (e) => {
  const value = e.detail.value
  if (!value.includes('.')) return (vdata.maxLength = 15) //不包含小数点
  vdata.maxLength = value.split('.')[0].length + 3
}
const refundPost = (payPassword) => {
  console.log('payPassword', payPassword)
  $payOrderRefund(vdata.orderInfo.payOrderId, vdata.refundAmount, vdata.refundRemark, payPassword)
    .then(({ bizData }) => {
      infoBox.showSuccessToast('退款已申请').then(() => {
        // 刷新订单数据
        emit.pageEmit(emit.ENAME_REF_PAY_ORDER)
        refundPopup.value.close()
        go.back()
      })
    })
    .catch((err) => {
      refundPopup.value.clearInput()
    })
}
</script>

<style lang="scss" scoped>
.refund-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(255, 91, 76, 1) 0%, rgba(203, 41, 114, 1) 100%);
  .refund-main {
    padding: 0 60rpx;
    .refund-title {
      margin: 50rpx 0 10rpx 0;
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.7);
    }
    .refund-money {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      min-height: 130rpx;
      color: #fff;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
      input {
        height: 100rpx;
        font-size: 60rpx;
        font-weight: 500;
      }
      .icon-unit {
        transform: translateY(-33rpx);
        font-size: 30rpx;
        font-weight: 500;
      }
    }
    .sure-refund {
      display: flex;
      margin: 30rpx 0 20rpx 0;
      color: rgba(255, 255, 255, 0.6);
      font-size: 30rpx;
      font-weight: 400;
      .all-refund {
        margin-left: 30rpx;
        color: rgba(255, 255, 255, 1);
      }
    }
    .refund-reason {
      display: flex;
      align-items: center;
      margin-bottom: 66rpx;
      height: 120rpx;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
      input {
        font-size: 30rpx;
        font-weight: 400;
        color: #fff;
      }
    }
    .refund-info {
      display: flex;
      justify-content: space-between;
      margin: 44rpx 0;
      font-size: 30rpx;
      font-weight: 400;
      .info-title {
        color: rgba(255, 255, 255, 0.7);
      }
      .info-text {
        color: #fff;
        font-weight: 500;
      }
    }
    .confirm-refund {
      margin-top: 74rpx;
      height: 110rpx;
      border-radius: $v-b-r20;
      background-color: #fff;
      color: #dd3b65;
      font-size: 33rpx;
      font-weight: 500;
    }
  }
}
</style>
